<script>
export default {
    data() {
        return {
            changeType: 1,
            datalist: [
                { name: '哈尔滨', value: 92.5 },
                { name: '齐齐哈尔', value: 90.1 },
                { name: '牡丹江', value: 88.3 },
                { name: '佳木斯', value: 82.7 },
                { name: '大庆', value: 75.4 },
                { name: '伊春', value: 72.3 },
                { name: '鸡西', value: 69.5 },
                { name: '绥化', value: 66.3 },
                { name: '七台河', value: 62.4 },
                { name: '黑河', value: 50.1 }
            ]
        }
    },
}
</script>

<template>
    <div class="table-wrap">
        <div class="table-head-wrap">
            <el-row>
                <el-col :span="2" class="el-style">
                    <div class="head-content">
                        <img :src="require('@/assets/img/icon6.png')" width="30" height="30" class="icon" />
                    </div>
                </el-col>
                <el-col :span="3" class="el-style">
                    <div class="head-content">地市</div>
                </el-col>
                <el-col :span="3" class="el-style">
                    <div class="head-content">计收项目数</div>
                </el-col>
                <el-col :span="5" class="el-style">
                    <div class="head-content">本月计划出账总金额</div>
                </el-col>
                <el-col :span="5" class="el-style">
                    <div class="head-content">本月实际出账总额</div>
                </el-col>
                <el-col :span="6" class="el-style">
                    <div class="head-content">累计当月应收总完成度</div>
                </el-col>
            </el-row>
        </div>
        <div class="table-body-wrap">
            <el-row v-for="(item, i) in datalist" :key="i" class="tr-bg">
                <el-col :span="2" class="el-style">
                    <div class="body-content">
                        <span class="num"
                            :style="{ backgroundColor: i == 0 ? '#ff3e33' : i == 1 ? '#ffa944' : i == 2 ? '#0ae7be' : '#0b82ff' }">{{
                            i+1 }}</span>
                    </div>
                </el-col>
                <el-col :span="3" class="el-style">
                    <div class="body-content">{{ item.name }}</div>
                </el-col>
                <el-col :span="3" class="el-style">
                    <div class="body-content">100</div>
                </el-col>
                <el-col :span="5" class="el-style">
                    <div class="body-content">50W</div>
                </el-col>
                <el-col :span="5" class="el-style">
                    <div class="body-content">80W</div>
                </el-col>
                <el-col :span="6" class="el-style">
                    <div class="body-content">
                        <span :class='["border-left", (1 < i &&  i < 7) && "blue-left", i > 6 && "yellow-left"]'></span>
                        <img :src="require(i < 2 ? '@/assets/img/green.png' : i < 7 ? '@/assets/img/blue.png' : '@/assets/img/yellow.png')" width="23" height="23" class="icon-pie" /> 
                        <span class="pie-value">{{item.value}}%</span>
                        <span :class='["border-right", (1 < i &&  i < 7) && "blue-right", i > 6 && "yellow-right"]'></span>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<style scoped lang="less">
.table-wrap {
    width: 100%;
    height: 520px;
    margin-top: 16px;
    box-sizing: border-box;
    font-size: 16px;

    .table-head-wrap {
        position: relative;
        box-sizing: border-box;
        width: 100%;
        height: 50px;

        .el-style {
            .head-content {
                position: relative;
                overflow: hidden;
                width: 100%;
                height: 50px;
                line-height: 50px;
                text-align: center;
                font-weight: bolder;
                color: #0b82ff;
            }
        }
    }

    .table-body-wrap {
        position: relative;
        box-sizing: border-box;
        width: 100%;
        height: calc(100% - 33.3px);
        background: white;
        overflow: auto;
        overflow-x: hidden;
        margin-top: 5px;
        &::-webkit-scrollbar {
            /*滚动条整体样式*/
            width: 6px;
            /*高宽分别对应横竖滚动条的尺寸*/
            height: 6px;
        }

        &::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 10px;
            box-shadow: inset 0 0 5px #777777;
            background: #ececec;
        }

        &::-webkit-scrollbar-track {
            /*滚动条里面轨道*/
            border-radius: 10px;
            background: transparent;
        }

        .el-style {
            .body-content {
                position: relative;
                overflow: hidden;
                width: 100%;
                height: 47px;
                line-height: 47px;
                text-align: center;
            }
        }

        .tr-bg {
            background: #f3fdfd;
        }

        .tr-bg:nth-child(2n) {
            background: #fff;
        }
    }
}

.icon {
    margin-top: 10px;
}

.num {
    color: #fff;
    background: #0b82ff;
    border-radius: 100px;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    margin: 10px;
    font-size: 14px;
    display: inline-block;
}
.icon-pie{
    position: absolute;
    left: 68px;
    top: 13px;
}
.pie-value{
    margin-left: 16px;
}
.border-left{
    width: 50px;
    height: 16px;
    position: absolute;
    background: #cef8f2;
    left: 16px;
    top: 17px;
    background: linear-gradient(to right, #cef8f2, transparent);
}
.border-right{
    width: 50px;
    height: 16px;
    position: absolute;
    background: #cef8f2;
    right: 20px;
    top: 17px;
    background: linear-gradient(to left, #cef8f2, transparent);
}
.blue-left{
    background: linear-gradient(to right, #c6e5fd, transparent);
}
.yellow-left{
    background: linear-gradient(to right, #ffefdd, transparent);
}
.blue-right{
    background: linear-gradient(to left, #c6e5fd, transparent);
}
.yellow-right{
    background: linear-gradient(to left, #ffefdd, transparent);
}
</style>
